<template>
  <div class="content">
    <div class="main">
      <div v-for="(item,index) in teachidData" :key="index" class="scatter"></div>
    </div>
  </div>
</template>

<script>
import { getTeachId } from '@/api/score'
import { getNum } from '@/api/score'
export default {
  data() {
    return {
      teachidData:[],
      numData:[]
    }
  },
  created(){
    getTeachId().then(res=>{
      if(res.data.status===0){
        this.teachidData=res.data.data
        for(let i=0;i<this.teachidData.length;i++){
          getNum({teachid:this.teachidData[i].teachid}).then(res=>{
            if(res.data.status===0){
              this.numData[i]=res.data.data
            }
          })
        }
      }
    })
  },
  methods:{
    initChart() {
        let myEchart=document.getElementsByClassName('scatter');
        for(let i=0;i<myEchart.length;i++){
          let myChart=this.$echarts.init(myEchart[i])
          let {e,d,c,b,a}=this.numData[i]
          let option = {
            title: {
              text:`教学班${this.teachidData[i].teachid}`
            },
            tooltip: {},
            legend: {
              data: ['人数']
            },
            xAxis: {
              data: ["60分以下", "60-70分", "70-80分", "80-90分", "90-100分"]
            },
            yAxis: {},
            series: [
              {
                name:'人数',
                type: 'scatter',
                data: [e,d,c,b,a]
              }
            ]
          }
          myChart.setOption(option);
        }
    }
  },
  mounted(){
    setTimeout(()=>{
      this.initChart()
    },100)
  }
}
</script>

<style>
.main{
  display: flex;
  justify-content: flex-start;
}
.main .scatter {
  width: 320px;
  height: 250px;
}
</style>